<template>
  <baidu-map class="map" center="长沙" :scroll-wheel-zoom="true">
    <!-- 
        position        定位
        dragging        拖拽
        raiseOnDrag     拖拽是否离开地图表面
        title           标注标题
        icon            自定义图标
    -->
    <!-- <bm-marker
      :position="{ lng: 112.914425, lat: 28.207645 }"
      :dragging="true"
      :raiseOnDrag="true"
      title="this is title"
      :icon="{
        url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif',
        size: { width: 300, height: 157 },
      }"
      animation="BMAP_ANIMATION_BOUNCE"
    > -->
    <bm-marker
      :position="{ lng: 112.914425, lat: 28.207645 }"
      @click="infoWindowOpen"
    >
      <bm-label
        content="梅溪湖东地铁站"
        :labelStyle="{ color: 'red', fontSize: '24px' }"
        :offset="{ width: -35, height: 30 }"
      />
      <!-- 新开详细弹框展示 -->
      <bm-info-window
        :show="show"
        @close="infoWindowClose"
        @open="infoWindowOpen"
        >湖南省长沙市岳麓区梅溪湖东地铁站</bm-info-window
      >
    </bm-marker>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 100%;
}
</style>